@import "./_main.scss";
@import "./theme.scss";
//遍历主题map
@mixin themeify {
  @each $theme-name, $theme-map in $themes {
    //!global 把局部变量强升为全局变量
    $theme-map: $theme-map !global;
    //判断html的data-theme的属性值 #{}是sass的插值表达式
    //& sass嵌套里的父容器标识  @content是混合器插槽，像vue的slot
    [data-theme="#{$theme-name}"] & {
      @content;
    }
  }
}


//声明一个根据Key获取颜色的方法
@function themed($key) {
  @return map-get($theme-map, $key);
}

//获取背景颜色
@mixin background_color($color) {
  @include themeify {
    background-color: themed($color) ;
  }
}
//获取背景颜色 !importment
@mixin background_color_important($color) {
  @include themeify {
    background-color: themed($color) !important;
  }
}

//获取字体颜色importment
@mixin font_color_important($color) {
  @include themeify {
    color: themed($color) !important;
  }
}

//获取字体颜色
@mixin font_color($color) {
  @include themeify {
    color: themed($color) ;
  }
}

//获取边框颜色
@mixin border_color($color) {
  @include themeify {
    border-color: themed($color) !important;
  }
}
//获取阴影颜色
@mixin box_shadow($color) {
  @include themeify {
    box-shadow: 0px 2px 4px 0px themed($color) !important;
  }
}
// 获取背景色渐变
@mixin linear-gradient($from, $to) {
  @include themeify {
    background: linear-gradient(to bottom, themed($from),themed($to));
  }
}
/*px转rem*/
@mixin px2rem($property,$px,$px2:false,$px3:false,$px4:false){
  $rem:75px;/* 设计稿尺寸/10 */
  @if $px and $px2 and $px3 and $px4 {
    #{$property}: ($px / $rem) + rem ($px2 / $rem) + rem ($px3 / $rem) + rem ($px4 / $rem) + rem;
  }
  @else if $px and $px2 {
    #{$property}: ($px / $rem) + rem ($px2 / $rem) + rem;
    //[data-model='pad'] & {#{$property}: ($px * 1.4 / $rem) + rem ($px2 * 1.4 / $rem) + rem;}
  }
  @else{
    #{$property}: ($px / $rem) + rem!important;
    //[data-model='pad'] & {#{$property}: ($px * 1.4 / $rem) + rem;}
  }
}

/*根据dpr计算font-size*/
@mixin font-dpr($font-size){
  font-size: $font-size;
  //[data-model="pad"] & { font-size: $font-size * 1.4; }
  [data-dpr="2"] & { font-size: $font-size * 2;}
  [data-dpr="3"] & { font-size: $font-size * 3;}
}

/*弹性盒属性*/
%flexbox{
  display: inline-flex;display: -webkit-flex;display: flex;
}
/*弹性盒比例*/
@mixin flex($num:1){
  -webkit-box-flex:$num;-moz-box-flex:$num;-webkit-flex:$num;-ms-flex:$num;flex:$num;
}
/*超行溢出显示省略号*/
@mixin overflow($num:1,$fontSize:0,$lineHeight:1.5){
  display: -webkit-box;-webkit-line-clamp:$num; overflow: hidden;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  @if $fontSize!=0 and $lineHeight{/*高度需要撑开*/
    line-height:$lineHeight;
    @if $lineHeight < 1.2 {
      line-height:1.2; /*最小需要1.2，否则在部分安卓机下第$num+1行会顶部漏出*/
    }
    height: $num * $fontSize * $lineHeight;
    [data-dpr="2"] & { height: $num * $fontSize * $lineHeight * 2!important;}
    [data-dpr="3"] & { height: $num * $fontSize * $lineHeight * 3!important;}
  }
}

//transition兼容写法
@mixin transition($content:all .2s){
  -moz-transition: $content;
  -webkit-transition: $content;
  -o-transition: $content;
  transition: $content;
}

//transfrom兼容
@mixin translateX($num:-50%){
  -ms-transform: translateX($num);
  -moz-transform: translateX($num);
  -webkit-transform: translateX($num);
  -o-transform: translateX($num);
  transform: translateX($num);
}

@mixin translateY($num:-50%){
  -ms-transform: translateY($num);
  -moz-transform: translateY($num);
  -webkit-transform: translateY($num);
  -o-transform: translateY($num);
  transform: translateY($num);
}

@mixin rotate($deg:90deg){
  -ms-transform:rotate($deg);
  -moz-transform:rotate($deg);
  -webkit-transform:rotate($deg);
  -o-transform:rotate($deg);
  transform:rotate($deg);
}

